<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!--JSTL  -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="en">
<head>
<title>员工培训管理系统-教员</title>

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/css/bootstrap.min.css">

<!-- FontAwesome CSS -->
<link rel="stylesheet" href="css/css/font-awesome.min.css">

<!-- ElegantFonts CSS -->
<link rel="stylesheet" href="css/css/elegant-fonts.css">

<!-- themify-icons CSS -->
<link rel="stylesheet" href="css/css/themify-icons.css">

<!-- Swiper CSS -->
<link rel="stylesheet" href="css/css/swiper.min.css">

<!-- Styles -->
<link rel="stylesheet" href="style.css">

<!-- 轮播 -->
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script
	src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>


<style type="text/css">
.dropdown {
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background: transparent;
	min-width: 150px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	color: #19c880;
}

.dropdown:hover .dropdown-content {
	display: block;
}
</style>
		<style>
			/* Make the image fully responsive */
	  .carousel-inner img {
	      width: 100%;
	      height: 100%;
	  }
	</style>
	</head>

	<body>
		<header class="site-header">
			<div class="top-header-bar">
				<div class="container-fluid">

				</div><!-- .container-fluid -->
			</div><!-- .top-header-bar -->

			<div class="nav-bar">
				<div class="container">
					<div class="row">
						<div class="col-9 col-lg-3">
							<div class="site-branding">
								<h1 class="site-title"><a href="TeacherMain.jsp" rel="home">Emp<span>Traning</span></a></h1>
							</div><!-- .site-branding -->
						</div><!-- .col -->

						<div class="col-3 col-lg-9 flex justify-content-end align-content-center">
							<nav class="site-navigation flex justify-content-end align-items-center">
								<ul style="overflow: inherit;"
									class="flex flex-column flex-lg-row justify-content-lg-end align-content-center">
									<li class="current-menu-item"><a href="TeacherMain.jsp">我的主页</a></li>
									<li><a href="#"></a></li>


									<li>
										<div class="dropdown" id="c1">
											<a href="TeacherCourse.jsp" class="dropbtn"
												class="current-menu-item">我的课程 <span id="down"
												class="fa fa-caret-down"
												style="margin-left: 10px; display: block;"></span> <span
												id="up" class="fa fa-caret-up"
												style="margin-left: 10px; display: none;"></span>
											</a>
											<div class="dropdown-content">
												<a
													href="CCPTServlet?op=queryByTea&teacherTel=${sessionScope.username}&courseStatus=1">招募中</a>
												<a
													href="CCPTServlet?op=queryByTea&teacherTel=${sessionScope.username}&courseStatus=2">开课中</a>
												<a
													href="CCPTServlet?op=queryByTea&teacherTel=${sessionScope.username}&courseStatus=3">已结课</a>
												<a
													href="CCPTServlet?op=queryByTea&teacherTel=${sessionScope.username}&courseStatus=4">已取消</a>
												<a
													href="CCPTServlet?op=queryByTea&teacherTel=${sessionScope.username}&courseStatus=5">已满员</a>
											</div>
										</div>
									</li>


									<li><a href="#"></a></li>
									<li><a href="TeaEndCourse.jsp">学员成绩</a></li>
									<li><a href="#"></a></li>
									<li>
										<div class="dropdown">
											<a href="TeacherInfo.jsp" class="dropbtn">个人中心 <span
												id="down" class="fa fa-caret-down"
												style="margin-left: 10px; display: block;"></span> <span
												id="up" class="fa fa-caret-up"
												style="margin-left: 10px; display: none;"></span>
											</a>
											<div class="dropdown-content">
												<a href="TeacherInfo.jsp">个人信息</a>
												<a href="#" id="Logout" >退出登录</a>
											</div>
										</div>
									</li>
								</ul>
								
							</nav><!-- .site-navigation -->
						</div><!-- .col -->
					</div><!-- .row -->
				</div><!-- .container -->
			</div><!-- .nav-bar -->
		</header><!-- .site-header -->

		<div id="demo" class="carousel slide" data-ride="carousel">

			<!-- 指示符 -->
			<ul class="carousel-indicators">
				<li data-target="#demo" data-slide-to="0" class="active"></li>
				<li data-target="#demo" data-slide-to="1"></li>
				<li data-target="#demo" data-slide-to="2"></li>
			</ul>

			<!-- 轮播图片 -->
			<div class="carousel-inner">
				<div class="carousel-item active">

					<div class="hero-content">
						<div class="hero-content-overlay">
							<div class="container">
								<div class="row">
									<div class="col-12">
										<div class="hero-content-wrap flex flex-column justify-content-center align-items-start">
											<header class="entry-header">
												<h2 style="color: seagreen">欢迎登录</h2>
												<h1>员工培训管理系统</h1>
											</header><!-- .entry-header -->

											<footer class="entry-footer read-more">
												<a href="#jump">阅读更多 </a>
											</footer><!-- .entry-footer -->
										</div><!-- .hero-content-wrap -->
									</div><!-- .col -->
								</div><!-- .row -->
							</div><!-- .container -->
						</div><!-- .hero-content-hero-content-overlay -->
					</div><!-- .hero-content -->

				</div>
				<div class="carousel-item">

					<div class="hero-content" style="background: url('images/single-post.jpg');background-size:100% 100%;">
						<div class="hero-content-overlay">
							<div class="container">
								<div class="row">
									<div class="col-12">
										<div class="hero-content-wrap flex flex-column justify-content-center align-items-start">
										
										</div><!-- .hero-content-wrap -->
									</div><!-- .col -->
								</div><!-- .row -->
							</div><!-- .container -->
						</div><!-- .hero-content-hero-content-overlay -->
					</div><!-- .hero-content -->

				</div>
				<div class="carousel-item">

					<div class="hero-content" style="background: url('images/single-course-featured-img.jpg');background-size:100% 100%;">
						<div class="hero-content-overlay">
							<div class="container">
								<div class="row">
									<div class="col-12">
										<div class="hero-content-wrap flex flex-column justify-content-center align-items-start">
											
                                

                            
										</div><!-- .hero-content-wrap -->
									</div><!-- .col -->
								</div><!-- .row -->
							</div><!-- .container -->
						</div><!-- .hero-content-hero-content-overlay -->
					</div><!-- .hero-content -->

				</div>
			</div>

			<!-- 左右切换按钮 -->
			<a class="carousel-control-prev" href="#demo" data-slide="prev">
				<span class="carousel-control-prev-icon"></span>
			</a>
			<a class="carousel-control-next" href="#demo" data-slide="next">
				<span class="carousel-control-next-icon"></span>
			</a>

		</div>

	<div class="icon-boxes" id="jump">
		<div class="container-fluid">
			<div class="flex flex-wrap align-items-stretch">
				<div class="icon-box">
					<div class="icon">
						<span class="fa fa-mortar-board"></span>
					</div>
					<!-- .icon -->

					<header class="entry-header">
						<h2 class="entry-title">名师专题</h2>
					</header>
					<!-- .entry-header -->

					<div class="entry-content">
						<p>Lorem Ipsum available, but the majority have suffered
							alteration in some form, by injected humour.</p>
					</div>
					<!-- .entry-content -->

					<footer class="entry-footer read-more">
						<a href="TeacherShow2.jsp">read more<i class="fa fa-long-arrow-right"></i></a>
					</footer>
					<!-- .entry-footer -->
				</div>
				<!-- .icon-box -->

				<div class="icon-box">
					<div class="icon">
						<span class="fa fa-pencil-square-o"></span>
					</div>
					<!-- .icon -->

					<header class="entry-header">
						<h2 class="entry-title">题库</h2>
					</header>
					<!-- .entry-header -->

					<div class="entry-content">
						<p>Lorem Ipsum available, but the majority have suffered
							alteration in some form, by injected humour.</p>
					</div>
					<!-- .entry-content -->

					<footer class="entry-footer read-more">
						<a href="#">read more<i class="fa fa-long-arrow-right"></i></a>
					</footer>
					<!-- .entry-footer -->
				</div>
				<!-- .icon-box -->

				<div class="icon-box">
					<div class="icon">
						<span class="fa fa-cogs"></span>
					</div>
					<!-- .icon -->

					<header class="entry-header">
						<h2 class="entry-title">技术体系</h2>
					</header>
					<!-- .entry-header -->

					<div class="entry-content">
						<p>Lorem Ipsum available, but the majority have suffered
							alteration in some form, by injected humour.</p>
					</div>
					<!-- .entry-content -->

					<footer class="entry-footer read-more">
						<a href="#">read more<i class="fa fa-long-arrow-right"></i></a>
					</footer>
					<!-- .entry-footer -->
				</div>
				<!-- .icon-box -->

				<div class="icon-box">
					<div class="icon">
						<span class="fa fa-commenting-o"></span>
					</div>
					<!-- .icon -->

					<header class="entry-header">
						<h2 class="entry-title">问答</h2>
					</header>
					<!-- .entry-header -->

					<div class="entry-content">
						<p>Lorem Ipsum available, but the majority have suffered
							alteration in some form, by injected humour.</p>
					</div>
					<!-- .entry-content -->

					<footer class="entry-footer read-more">
						<a href="#">read more<i class="fa fa-long-arrow-right"></i></a>
					</footer>
					<!-- .entry-footer -->
				</div>
				<!-- .icon-box -->
			</div>
			<!-- .row -->
		</div>
		<!-- .container-fluid -->
	</div>
	<!-- .icon-boxes -->


	<section class="featured-courses vertical-column courses-wrap">
		<div class="container">
			<div class="row mx-m-25">
				<div class="col-12 px-25">
					<header
						class="heading flex flex-wrap justify-content-between align-items-center">
						<h2 class="entry-title">特色课程</h2>

						<nav class="courses-menu mt-3 mt-lg-0">
							<ul
								class="flex flex-wrap justify-content-md-end align-items-center">
								<li class="active"><a href="TeacherCourse.jsp">查看所有</a></li>
							</ul>
						</nav>
						<!-- .courses-menu -->
					</header>
					<!-- .heading -->
				</div>
				<!-- .col -->

				<!-- 课程计划信息  -->
				<!-- 如果属性范围内的pd为null，我们就跳转到UserServlet去获取数据，然后再转发回来 -->
				<c:if test="${pd==null}">
					<!-- c:redirect 跳转到 UserServlet -->
					<c:redirect url="CCPTServlet?op=queryByTeaPage"></c:redirect>
				</c:if>
				<!-- 如果 范围内的list不为空，遍历数据并展示结果 -->
				<c:if test="${pd!=null}">
					<c:forEach items="${pd.data}" var="ccpt">

						<div class="col-12 col-md-6 col-lg-4 px-25">
							<div class="course-content">
								<figure class="course-thumbnail">
									<a href="#"><img src="${ccpt.coursePic}" alt=""></a>
								</figure>
								<!-- .course-thumbnail -->

								<div class="course-content-wrap">
									<header class="entry-header">
										<h2 class="entry-title">
											<a
												href="SingleCourses.jsp?
													courseName=${ccpt.courseName}
													&cpNo=${ccpt.cpNo}
													&coursePic=${ccpt.coursePic}
													&courseStatus=${ccpt.courseStatus}
													&subJect=${ccpt.subJect}
													&teacherPic=${ccpt.teacherPic}
													&teacherName=${ccpt.teacherName}
													&courseNum=${ccpt.courseNum}
													&courseDesc=${ccpt.courseDesc}
													&courseStart=${ccpt.courseStart}
													&courseEnd=${ccpt.courseEnd}
													&courseTime=${ccpt.courseTime}
													&coursePlace=${ccpt.coursePlace}
													&teacherXl=${ccpt.teacherXl}
													&teacherSex=${ccpt.teacherSex}
													&teacherTel=${ccpt.teacherTel}
													&teacherDesc=${ccpt.teacherDesc}
													">${ccpt.courseName}</a>
										</h2>

										<div class="entry-meta flex flex-wrap align-items-center">
											<div class="course-author">
												<a href="#">Ms. ${ccpt.teacherName} </a>
											</div>

											<div class="course-date">${ccpt.courseStart}</div>
										</div>
										<!-- .course-date -->
									</header>
									<!-- .entry-header -->

									<footer
										class="entry-footer flex flex-wrap justify-content-between align-items-center">
										<div class="course-cost">${ccpt.subJect}</div>
										<!-- .course-cost -->

										<div
											class="course-ratings flex justify-content-end align-items-center">
											<span class="fa fa-star checked"></span> <span
												class="fa fa-star checked"></span> <span
												class="fa fa-star checked"></span> <span
												class="fa fa-star checked"></span> <span
												class="fa fa-star-o"></span> <span
												class="course-ratings-count">(4 votes)</span>
										</div>
										<!-- .course-ratings -->
									</footer>
									<!-- .entry-footer -->
								</div>
								<!-- .course-content-wrap -->
							</div>
							<!-- .course-content -->
						</div>
						<!-- .col -->

					</c:forEach>
				</c:if>



				<div class="col-12 px-25 flex justify-content-center">
					<a class="btn" href="#">回到顶部</a>
				</div>
				<!-- .col -->

			</div>
			<!-- .row -->
		</div>
		<!-- .container -->
	</section>
	<!-- .courses-wrap -->
		<footer class="site-footer">
		<div class="footer-widgets">
			<div class="container">
				<div class="row">
					<div class="col-12 col-md-6 col-lg-3">
						<h2 class="w-100">版权</h2>
						<div class="foot-about">
							<p class="footer-copyright">版权所有:bug总和我作队</p>
						</div>
						<!-- .foot-about -->
					</div>
					<!-- .col -->
					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-md-0">
						<div class="foot-contact">
							<h2>联系我们</h2>

							<ul>
								<li>电子邮件：1727283192@qq.com</li>
								<li>电话：17606064136</li>
								<li>地址：福建省厦门市</li>
							</ul>
						</div>
						<!-- .foot-contact -->
					</div>
					<!-- .col -->

					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-lg-0">
						<div class="quick-links flex flex-wrap">
							<h2 class="w-100">快速连接</h2>

							<ul class="w-50">
								<li><a href="about.html">关于 </a></li>
								<li><a href="#">使用条款</a></li>
								<li><a href="#">隐私政策 </a></li>
								<li><a href="#">联系我们</a></li>
							</ul>

						</div>
						<!-- .quick-links -->
					</div>
					<!-- .col -->

					<div class="col-12 col-md-6 col-lg-3 mt-5 mt-lg-0">
						<div class="follow-us">
							<h2>关注我们的动向</h2>
							<img src="images/erweima.png">
						</div>
						<!-- .quick-links -->
					</div>
					<!-- .col -->
				</div>
				<!-- .row -->
			</div>
			<!-- .container -->
		</div>
		<!-- .footer-widgets -->

	</footer>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script type='text/javascript' src='js/js/jquery.js'></script>
	<script type='text/javascript' src='js/js/swiper.min.js'></script>
	<script type='text/javascript' src='js/js/masonry.pkgd.min.js'></script>
	<script type='text/javascript' src='js/js/jquery.collapsible.min.js'></script>
	<script type='text/javascript' src='js/js/custom.js'></script>
	<!--3 - js/jquery-2.0.3.js -->
	<script src="js/jquery-2.0.3.js"></script>
	<script>
		$(".dropdown").mouseover(function() {
			$("#down").css('display', 'none');
			$("#up").css('display', 'block');
		});
		$(".dropdown").mouseout(function() {
			$("#down").css('display', 'block');
			$("#up").css('display', 'none');
		});
	</script>
	<!--退出登录-->
	<script>
		layui
				.use(
						[ 'layer' ],
						function() {
							$ = layui.jquery;//jquery
							layer = layui.layer;//弹出层
							$("#Logout")
									.click(
											function() {
												layer
														.confirm(
																'确认要退出登录吗？',
																function(index) {
																	$
																			.ajax({
																				url : "LoginServlet",
																				type : "get",
																				data : {
																					op1 : "logout"
																				},
																				success : function(
																						data) {
																					if (data.code == 1) {
																						location.href = "http://localhost:8080/EmpTrainingTest/Login.jsp";
																						return false;
																					}
																				},
																				dataType : "json"
																			});
																});
											});
						});
	</script>

</body>
</html>